{extend name="iframe" /}
{block name="css"}
<link href="__STATIC__/plugins/mediaelement-4.2.9/mediaelementplayer.min.css" rel="stylesheet">
    <style type="text/css">
        .editForm{
            margin-top: 20px;
        }
        @media (min-width: 768px){
            .bootstrap-switch{
                margin-top: 7px;
            }
        }
    </style>
{/block}

{block name="content"}
    <div class="container content-wrapper-box">
        <div class="content-wrapper">
        <div class="row" style="margin-top: 20px;">
            <div class="table-responsive">
                <table class="table table-striped table-hover">
                    <thead>
                    <tr>
                        <th>呼叫时间</th>
                        <th>主叫</th>
                        <th>被叫</th>
                        <th>通话时长</th>
                        <th>呼叫类型</th>
                        <th>录音</th>
                    </tr>
                    </thead>
                    <tbody id="tbody_cdr">
                        <?php foreach($rows as $i=>$row){ ?>
                        <tr>
                            <td>{$row.starttime}</td>
                            <td><a href="javascript:;" class="text-info clkcall" title="点击呼叫"><i class="fa fa-phone-square" style="font-size:18px;"></i></a>&nbsp;&nbsp;
                                <span>{$row.src}</span></td>
                            <td><a href="javascript:;" class="text-info clkcall" title="点击呼叫"><i class="fa fa-phone-square" style="font-size:18px;"></i></a>&nbsp;&nbsp;
                                <span>{$row.dst}</span></td>
                            <td>{$row.billsec_val}</td>
                            <td>{$row.calltype_val}</td>
                            <td class="text-center">
                                <a class="opt-record" title="录音"
                                   data-uniqueid="{$row.uniqueid}" data-accountcode="{$row.accountcode}" data-inner_exten="{$row.inner_exten}"
                                   href="javascript:;"><i class="glyphicon glyphicon-volume-up"></i></a>
                            </td>
                        </tr>
                        <?php } ?>
                    </tbody>
                </table>
            </div>
        </div>
        </div>
    </div>
{/block}

{block name="script"}
<script src="__STATIC__/plugins/mediaelement-4.2.9/mediaelement-and-player.min.js"></script>
<script src="__STATIC__/plugins/mediaelement-4.2.9/lang/zh-cn.js"></script>
    <script type="text/javascript">

    $(document).ready(function () {
        var $modalWin = $("#modalWin");

        //点击拨号
        $('#tbody_cdr').on("click", 'a.clkcall' ,function() {
            var callee_phone = $(this).next('span').text();
            if(callee_phone==''){
                bootbox.error('呼叫失败：号码不能为空！');
                return;
            }
            top.clickcall(callee_phone);
            return false;
        });


        //录音窗口事件绑定
        $('#tbody_cdr').on('click', 'a.opt-record', function () {
            var uniqueid = $(this).data('uniqueid');
            var accountcode = $(this).data('accountcode');
            var inner_exten = $(this).data('inner_exten');

            $('#modalWin').modal({
                backdrop: 'static',
                remote: "{:url('Cdr/record')}" +'?uniqueid=' +uniqueid +'&accountcode=' +accountcode +'&inner_exten=' +inner_exten
            });
        });
        $modalWin.on("hidden.bs.modal", function() {
            $(this).removeData("bs.modal");
        });
        $modalWin.on("click", '#btn-cancel', function() {
            var myVideo = document.getElementById("cdr_record");
            myVideo && myVideo.pause();
            $modalWin.modal('hide');
        });
        $modalWin.on('click', 'button.close', function () {
            var myVideo = document.getElementById("cdr_record");
            myVideo && myVideo.pause();
        });

    })
    </script>
{/block}
